<template>
  <div>
    <div class="home_bg">
      <div class="bg_img">
        <img src="../static/logo.png" alt width="50px">
      </div>
      <div class="bg_right">
        <span class="home-span">{{ userid }}-{{ username }}</span>
        <span class="home-span" style="font-size:14px">{{ deptname }}</span>
      </div>
      <!-- <span class="home-span">{{ username }}</span>
      <span class="home-span">设计部</span>-->
    </div>
    <!-- <div style="position: relative">
      <div class="info_div" @click="gonuxt('myinfo','个人信息')">
        <mt-cell title="个人信息" class="cell_info">
          <span>></span>
          <img slot="icon" src="../static/info.png" width="24" height="24" />
        </mt-cell>
      </div>
      <div class="info_div">
        <div @click="gonuxt('equipment','设备负责人')">
          <mt-cell title="设备负责人" class="cell_info">
            <span>></span>
            <img slot="icon" src="../static/fuze.png" width="24" height="24" />
          </mt-cell>
        </div>
        <div @click="gonuxt('trainplan','培训计划')">
          <mt-cell title="培训计划" class="cell_info">
            <span>></span>
            <img slot="icon" src="../static/shebei.png" width="24" height="24" />
          </mt-cell>
        </div>
      </div>
      <div class="info_div">
        <div @click="gonuxt('carused','司机出车记录')">
          <mt-cell title="司机出车记录" class="cell_info">
            <span>></span>
            <img slot="icon" src="../static/jilu.png" width="24" height="24" />
          </mt-cell>
        </div>
        <div @click="gonuxt('carplan','司机出车计划')">
          <mt-cell title="司机出车计划" class="cell_info">
            <span>></span>
            <img slot="icon" src="../static/plan2.png" width="24" height="24" />
          </mt-cell>
        </div>
      </div>
      <div class="info_div">
        <div @click="gonuxt('approval','审批流程')">
          <mt-cell title="审批流程" class="cell_info">
            <span>></span>
            <img slot="icon" src="../static/shenpi.png" width="24" height="24" />
          </mt-cell>
        </div>
        <div @click="gonuxt('approval2','进行审批')">
          <mt-cell title="进行审批" class="cell_info">
            <span>></span>
            <img slot="icon" src="../static/shenpi.png" width="24" height="24" />
          </mt-cell>
        </div>
      </div>
    </div>-->
    <div class="jbrhome_wrapper">
      <div class="box" @click="gonuxt('myinfo','个人信息')">
        <img src="../static/my.png" alt class="img_jg">
        <span class="jg_title">个人信息</span>
      </div>
      <div class="box" @click="gonuxt('approval2','申请')">
        <img src="../static/playsp.png" alt class="img_jg">
        <span class="jg_title">申请</span>
      </div>
      <div class="box" @click="gonuxt('approval','审批')">
        <img src="../static/spl.png" alt class="img_jg">
        <span class="jg_title">审批</span>
      </div>
      <div class="box" @click="gonuxt('task','任务')">
        <img src="../static/spl.png" alt class="img_jg">
        <span class="jg_title">任务</span>
      </div>
      <div class="box" @click="gonuxt('announcement','公告中心')">
        <img src="../static/playsp.png" alt class="img_jg">
        <span class="jg_title">公告中心</span>
      </div>
      <div class="box" @click="gonuxt('equipment','仪器设备')">
        <img src="../static/sb.png" alt class="img_jg">
        <span class="jg_title">仪器设备</span>
      </div>
      <div class="box" @click="gonuxt('carused','出车记录')">
        <img src="../static/car.png" alt class="img_jg">
        <span class="jg_title">出车记录</span>
      </div>
      <div class="box" @click="gonuxt('carplan','出车计划')">
        <img src="../static/carplan.png" alt class="img_jg">
        <span class="jg_title">出车计划</span>
      </div>
      <div class="box" @click="gonuxt('intermed','期间核查')">
        <img src="../static/playsp.png" alt class="img_jg">
        <span class="jg_title">期间核查</span>
      </div>
      <div class="box" @click="gonuxt('carintermed','维护记录')">
        <img src="../static/spl.png" alt class="img_jg">
        <span class="jg_title">维护记录</span>
      </div>
      <div class="box" @click="gonuxt('trainplan','培训记录')">
        <img src="../static/plan.png" alt class="img_jg">
        <span class="jg_title">培训记录</span>
      </div>
    </div>
    <!-- <div class="blockDiv">
      <div v-for="(item, index) in sixhome" :key="index" class="block" @click="gonuxt(item.route)">
        <img src="../static/head.png"  style="width:60px;heig6ht:60px"/>
        <div>{{item.name}}</div>
      </div>
    </div>-->
  </div>
</template>

<script>
export default {
  layout: 'default',
  data () {
    return {
      ts: this.newStore(),
      username: window.localStorage.getItem('username'),
      userid: window.localStorage.getItem('userid'),
      deptname: window.localStorage.getItem('deptname'),
      DomName: 'wrapper'
    }
  },
  created () { },
  mounted () {
    this.username = window.localStorage.getItem('username')
    this.userid = window.localStorage.getItem('userid')
    this.deptname = window.localStorage.getItem('deptname')
  },
  methods: {
    gonuxt (val, name) {
      this.$router.push({ name: val, query: { name: name } })
    }
  }
}
</script>
<style scoped>
.home_bg {
  display: flex;
  align-items: center;
  background: url(../static/homebg.png) no-repeat;
  background-size: 100%;
  height: 140px;
  margin-bottom: 30px;
  text-align: center;
}
.bg_img {
  width: 30%;
}
.bg_right {
  width: 70%;
}
.blockDiv {
  margin-top: 100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.block {
  width: calc(calc(100% / 2) - 10px);
  margin: 5px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
}
.home-span {
  display: block;
  /* padding: 75px 0 0 46px; */
  color: #fff;
  font-size: 16px;
}
.info_div {
  position: relative;
  top: -25px;
  width: 90%;
  margin: 0px auto 15px;
  box-shadow: 1px 3px 4px 1px #f3f3f3;
  border-radius: 8px;
}
.bg_img {
  float: left;
  padding: 40px;
}
.cell_info {
  border-radius: 8px;
  background-image: none;
  font-size: 14px;
}
.mint-cell-wrapper {
  font-size: 14px;
}
.mint-cell:last-child {
  background-image: none;
}
.jbrhome_wrapper {
  width: 100%;
  height: 50vh;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.box {
  width: calc(calc(100% / 3));
  color: #000;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
}
.box:nth-child(3n) {
  border-right: none;
}
.box:nth-child(10) {
  border-bottom: none;
}
.box:nth-child(11) {
  border-bottom: none;
}

.img_jg {
  width: 35px;
  display: block;
  /* text-align: center; */
  margin: 0 auto;
  /* line-height: 72px; */
  padding-top: 25px;
}
.jg_title {
  display: inline-block;
  line-height: 30px;
  color: #333333ff;
  font-size: 14px;
}
</style>
